<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转圈圈</title>

    <!-- vue -->
    <script src="./assets/js-vue/vue.js"></script>
    <!--element-->
    <link rel="stylesheet" type="text/css" href="./assets/js-vue/element/index.css">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <script src="./assets/js-vue/element/index.js"></script>
    <script type="text/javascript" src="./assets/jquery-3.6.1.min.js"></script>
    <!--公共方法-->
    <script type="text/javascript" src="./utils/common.js"></script>
    <!--请求封装-->
    <script type="text/javascript" src="utils/myAjax.js"></script>

    <style>
        .container{
            /**/

        }

        .choose-box{
            border: red solid 1px;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }


        .box{
            border: #00ff00 solid 1px;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;

        }




    </style>


</head>
<body>

<!--'margin-left':item._left + 'px','margin-top':item._top + 'px'-->
    <div id="app">
        <div>  <el-input v-model="input" placeholder="请输入内容" style="width: 800px"></el-input><el-button @click="addString">写入数据库</el-button></div>
            <div class="container">
                <div style="display: flex;flex-wrap: wrap">
                    <div v-for="(item,index) in chooseList"
                         class="choose-box">
                        <span>{{item}}</span>
                    </div>
                </div>
                <div style="display: flex;flex-wrap: wrap">
                    <div v-for="(item,index) in inputString"
                         class="box"
                    @click="chooseBox(index)">
                        <span>{{item}}</span>
                    </div>
                </div>

            </div>
    </div>


<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data(){
            return{
                input:"",
                inputString:"",
                chooseList:[],
                chooseIndex:[],
            }
        },
        created(){
        },
        methods:{
            addString(){
                if( !(20<=this.input.length<=60) ){
                    alert("长度不符合，长度为20-60")
                    return
                }
                let that =this;
                sendAjaxNoToken("/exam/addString/"+this.input,"POST",).then((res)=>{
                    if(res.msg == '操作成功'){
                        this.$message.success("新增成功");
                        //生成格子
                        that.inputString = that.input;
                        that.chooseList = Array(this.input.length).fill("")
                        console.log(that.chooseList)
                    }else{
                        this.$message.error(res.msg);
                    }
                })
            },
            chooseBox(index){
                console.log(index)

                console.log(this.inputString.substring(index,index+1))
                if(this.chooseIndex.filter( s=>{ return s == index}).length > 0  ){
                    alert("该格子已经选中过")
                    return
                }
                this.chooseIndex.push(index)
                this.chooseList[index] = this.inputString.substring(index,index+1);
                this.chooseList = [...this.chooseList]


            }
        }
    })

</script>



</body>
</html>